<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <%--<link href="/static/css/bootstrap.css"/>--%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
<div style="height: 30px"></div>
<div class="container bigBox">

    <%--条件查询--%>
    <div class="col-lg-2 text-left" style="margin-top: 60px">
        <form role="form" id="selectByMsg">
            <div class="form-group">
                <label for="itemCode">物料编号</label>
                <input type="text" class="form-control updateItemCode" name="itemCode" value="">

            </div>
            <div class="form-group">
                <label for="itemDescription">物料描述</label>
                <input type="text" class="form-control" name="itemDescription" value="">
            </div>
            <div class="form-group">
                <label for="itemUom">物料单位</label>
                <select class="form-control" name="itemUom">
                    <option>米</option>
                    <option>平方米</option>
                    <option>立方米</option>
                    <option>千克</option>
                    <option>其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="startActiveDate">生效时间从</label>
                <input type="date" class="form-control" name="startActiveDate" value="">
            </div>

            <div class="form-group">
                <label for="endActiveDate">生效时间至</label>
                <input type="date" class="form-control" name="endActiveDate" value="">
            </div>
            <div class="form-group">
                <label for="enabledFlag">是否启用</label>
                <select class="form-control" name="enabledFlag" id="enabledFlag">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">重置</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-primary" id="selectByMsgButton">查询</button>
            </div>


        </form>
    </div>

    <%--信息列表--%>
    <div class="col-lg-10">
        <div>
            <table class="table table-hover" id="itemTable">
                <caption class="text-center lead">物料管理</caption>
                <thead>
                <tr>
                    <th class="text-center"><input type='checkbox' class='check_item' id="chenkboxGroup"/></th>
                    <th class="text-center">物料编码</th>
                    <th class="text-center">物料描述</th>
                    <th class="text-center">物料单位</th>
                    <th class="text-center">生效时间从</th>
                    <th class="text-center">生效时间至</th>
                    <th class="text-center">是否启用</th>
                    <th class="text-center">操作</th>

                </tr>

                </thead>
                <tbody class="text-center" id="itemList">
                <%--物料列表--%>
                </tbody>

            </table>
        </div>

        <%--添加物料按钮--%>
        <button type="button" class="btn btn-primary" id="addButtonModal" data-toggle="modal"
                data-target="#addModal">添加物料
        </button>
        <%--批量删除--%>
        <button type="button" class="btn btn-danger btn-primary" id="delListButton">
            批量删除
        </button>

        <%--显示分页信息--%>
        <div >
            <%--分页文字信息--%>
            <div class="col-md-4" id="page_info_area">

            </div>
            <%--分页条--%>
            <div class="col-md-4 text-right" id="page_nav_area">

            </div>
            <%--控制每页数据条数--%>
            <div class="col-md-4 text-right" id="page_pagesize_area">
                <select class="form-group" id="met_PageSize">
                    <option value="5">5条/页</option>
                    <option value="6">6条/页</option>
                    <option value="7">7条/页</option>
                    <option value="8">8条/页</option>
                    <option value="9">9条/页</option>
                    <option value="10">10条/页</option>
                </select>
            </div>

        </div>

    </div>
    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" id="updateForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" class="form-control" id="itemId" name="itemId" value="">
                        <div class="form-group">
                            <label for="itemCode">物料编号</label>
                            <input type="hidden" class="form-control updateItemCode" id="itemCode_" name="itemCode"
                                   value="">
                            <input type="text" class="form-control updateItemCode" id="itemCode" value="" disabled>
                        </div>
                        <div class="form-group">
                            <label for="itemDescription">物料描述</label>
                            <input type="text" class="form-control" id="itemDescription" name="itemDescription"
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="itemUom">物料单位</label>
                            <select class="form-control" name="itemUom" id="itemUom">
                                <option>米</option>
                                <option>平方米</option>
                                <option>立方米</option>
                                <option>千克</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="startActiveDate">生效时间从</label>
                            <input type="date" class="form-control" id="startActiveDate" name="startActiveDate"
                                   value="">
                        </div>

                        <div class="form-group">
                            <label for="endActiveDate">生效时间至</label>
                            <input type="date" class="form-control" id="endActiveDate" name="endActiveDate" value="">
                        </div>
                        <div class="form-group">
                            <label for="enabledFlag_">是否启用</label>
                            <select class="form-control" name="enabledFlag_" id="enabledFlag_">
                                <option>是</option>
                                <option>否</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="updateButton">修改</button>
                    </div>
                </form>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- 添加模态框（Modal） -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" id="addForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel2">修改学生信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="itemDescription">物料描述</label>
                            <input type="text" class="form-control" name="itemDescription" value="">
                        </div>
                        <div class="form-group">
                            <label for="itemUom">物料单位</label>
                            <select class="form-control" name="itemUom">
                                <option>米</option>
                                <option>平方米</option>
                                <option>立方米</option>
                                <option>千克</option>
                                <option>个</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="startActiveDate">生效时间从</label>
                            <input type="date" class="form-control" name="startActiveDate" value="">
                        </div>

                        <div class="form-group">
                            <label for="endActiveDate">生效时间至</label>
                            <input type="date" class="form-control" name="endActiveDate" value="">
                        </div>
                        <div class="form-group">
                            <label for="enabledFlag_">是否启用</label>
                            <select class="form-control" name="enabledFlag_">
                                <option>是</option>
                                <option>否</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="addButton">添加</button>
                    </div>
                </form>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

<%--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>--%>
<%--<script src="/static/js/bootstrap.js/"></script>--%>
<script type="text/javascript">

    var totalRecord;//总记录数
    var currentPage=1; //当前页数
    var currentPageSize=5;
    //页面加载完成以后，直接去发送一个ajax请求，拿到分页数据
    $(function () {
        //去首页
        to_page(currentPage, currentPageSize);
    });

    //跳到当前页
    function to_page(pageNo) {
        $.ajax({
            url: "item/list",
            type: "post",
            data: {"pageNo": pageNo, "pageSize": currentPageSize,"item":$("#selectByMsg").serialize()},
            success: function (data) {
                //1、解析并显示物料数据
                build_item_table(data);
                //2、解析并显示分页信息
                build_page_info(data);
                //3、解析显示分页条
                build_page_nav(data);
            }
        });
    }

    //解析数据
    function build_item_table(result) {
        //清空 table表格
        $("#itemTable tbody").empty();
        var items = result.list;
        $.each(items, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            checkBoxTd.attr("itemId", item.itemId);
            var itemCodeTd = $("<td></td>").append(item.itemCode);
            var itemDescriptionTd = $("<td></td>").append(item.itemDescription);
            var itemUomTd = $("<td></td>").append(item.itemUom);
            var startActiveDateTd = $("<td></td>").append(item.startActiveDate);
            var endActiveDateTd = $("<td></td>").append(item.endActiveDate);
            var enabledFlagTd = $("<td></td>").append(item.enabledFlag);

            var editBnt = $("<button></button>").addClass("btn btn-info btn-sm selectButton")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("修改");
            //为编辑按钮添加一个自定义的属性，来表示当前物料的id
            editBnt.attr("edit-id", item.itemId);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delButton")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性，来表示当前物料的id
            delBtn.attr("del-id", item.itemId);

            var btnTd = $("<td></td>").append(editBnt).append(" ").append(delBtn);
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(itemCodeTd)
                .append(itemDescriptionTd)
                .append(itemUomTd)
                .append(startActiveDateTd)
                .append(endActiveDateTd)
                .append(enabledFlagTd)
                .append(btnTd)
                .appendTo("#itemTable tbody");
        })

    }

    //解析显示分页信息
    function build_page_info(result) {
        //清空分页信息
        $("#page_info_area").empty();

        totalRecord = result.total;
        currentPage = result.pageNum;
    }

    //解析分页条,点击分页要能去下一页
    function build_page_nav(result) {
        //清空分页条
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var prePageLi = $("<li></li>").append(($("<a></a>")).append("&laquo;"));
        if (result.hasPreviousPage == false) {//判断是否有上一页
            prePageLi.addClass("disabled");
        } else {
            prePageLi.click(function () {
                to_page(currentPage - 1);
            });
        }
        var nextPageLi = $("<li></li>").append(($("<a></a>")).append("&raquo;"));
        if (result.hasNextPage == false) {//判断是否有下一页
            nextPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function () {
                to_page(currentPage + 1);
            });
        }

        //添加首页和前一页
        ul.append(prePageLi);
        //pageSize页数
        $.each(result.navigatepageNums, function (index, item) {

            var numLi = $("<li></li>").append(($("<a></a>")).append(item));
            if (result.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });

        //再添加下一页和末页
        ul.append(nextPageLi);
        //将ul加入到nav中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //单个删除
    $(document).on("click", ".delButton", function () {
        var itemId = $(this).attr("del-id");
        var msg = confirm("是否删除?");
        if (msg) {
            var url = '/item/delete?itemId=' + itemId;
            $.post(url, function (data) {
                if (data) {
                    alert("删除成功");
                } else {
                    alert("删除失败");
                }
                to_page(currentPage);
            });
        }
    });


    //更新物料信息
    $(document).on("click", ".selectButton", function () {
        // alert("编辑");
        //查出物料信息
        getMets($(this).attr("edit-id"));
        //把物料的id传递给模态框的更新按钮
        $("#mets_update_btn").attr("edit-id", $(this).attr("edit-id"));
        $("#updateModal").modal({
            backdrop: "static"
        });
    });

    function getMets(id) {
        $.ajax({
            url: "item/select?itemId=" + id,
            type: "GET",
            success: function (result) {
                // console.log(result);
                var item = result;
                $("#itemId").val(item.itemId);
                $(".updateItemCode").val(item.itemCode);
                $("#itemDescription").val(item.itemDescription);
                $("#itemUom").val(item.itemUom);
                $("#startActiveDate").val(item.startActiveDate);
                $("#endActiveDate").val(item.endActiveDate);
                if (item.enabledFlag == 1) {
                    $("#enabledFlag_").val("是");
                } else {
                    $("#enabledFlag_").val("否");
                }
            }

        });
    }


    //点击修改按钮,执行修改操作
    $("#updateButton").click(function () {
        var url = "/item/update";
        $.post(url, $("#updateForm").serialize(), function (data) {
            if (data) {
                alert("修改成功");
            } else {
                alert("修改失败");
            }
            $("#updateModal").modal("hide");
            to_page(currentPage);

        });
    })

    //点击添加按钮,执行添加操作
    $("#addButton").click(function () {
        var url = "/item/add";
        $.post(url, $("#addForm").serialize(), function (data) {
            $("#addModal").modal("hide");
            if (data) {
                alert("添加成功");

            } else {
                alert("添加失败");
            }
        });
        to_page(currentPage);
    })


    $("#met_PageSize").change(function () {
        currentPageSize = $("#met_PageSize").val();
        to_page(currentPage);

    })

    $("#selectByMsgButton").click(function () {
        alert("该功能暂未开放哦\n" +
            "您可以试试批量删除哦");
        to_page(currentPage);
    })

    // 批量删除
    $("#delListButton").click(function () {
        var idList= new Array();
        $(".check_item:checked").each(function(i,c){
                idList.unshift($(c).parent("td").attr("itemId")) ;
        });
        var  url="/item/deleteList?idList="+idList;

        console.info(idList);
        $.post(url,function (data) {
            if (data) {
                alert("删除"+data+"行");
            }
            to_page(currentPage);

        });
    })

    $(document).on('click','#chenkboxGroup',function(){
        if($(this).is(":checked")){
            $('.check_item').prop('checked',true);
        }else{
            $('.check_item').prop('checked',false);
        }
    });



</script>
</body>
</html>